<template>
  <div class="mod-config">
    <basic-container>
      <el-row style="text-align: right;">
        <el-button type="primary" @click="openDialog('preCheck')">预检</el-button>
        <el-button type="primary" @click="openDialog('first','')">检查</el-button>
        <!-- <el-button type="primary" @click="openDialog('again','')">复验</el-button> -->
      </el-row>
      <el-form inline>
        <el-divider content-position="left">验光信息</el-divider>
        <el-row class="bg-row">
          <el-form-item label="验光号">
            <el-input v-model="checkData.checkNumber" readonly></el-input>
          </el-form-item>
          <el-form-item label="验光师">
            <el-input v-model="checkData.checker" readonly></el-input>
          </el-form-item>
          <el-form-item label="日期">
            <el-input v-model="checkData.checkDate" readonly></el-input>
          </el-form-item>
        </el-row>
        <el-divider content-position="left">顾客资料</el-divider>
        <el-row class="bg-row">
          <el-form-item label="卡号">
            <el-input v-model="customerData.cardNum" @keyup.enter.native="getCustomerByCardNo()"></el-input>
          </el-form-item>
          <el-form-item label-width="0">
            <el-button type="info" @click="getCustomerByCardNo">读取</el-button>
            <el-button type="info" @click="openDialog('person')">查询</el-button>
          </el-form-item>
          <el-form-item label="姓名">
            <span class='label-form'>{{customerData.name}}</span>
          </el-form-item>
          <el-form-item label="性别">
            <span class='label-form' v-if="customerData.gender == 0">男</span>
            <span class='label-form' v-if="customerData.gender == 1">女</span>
          </el-form-item>
          <el-form-item label="生日">
            <span class='label-form'>{{customerData.birthDay}}</span>
          </el-form-item>
          <el-form-item label="电话">
            <span class='label-form'>{{customerData.telPhone}}</span>
          </el-form-item>
          <el-form-item label-width="0">
            <!-- <el-button type="info" @click="openDialog('customerDetail')">详情</el-button> -->
          </el-form-item>
        </el-row>
      </el-form>
      <el-divider content-position="left">查询信息</el-divider>
      <el-form>
        <table class="miui-table" style="width: 100%;text-align: center;" v-if="chkDatas.length">
          <tr class="miui-table-tbody">
            <td :colspan="14">顾客验光记录</td>
          </tr>
        </table>
        <table class="miui-table" style="width: 100%;text-align: center;" v-for="chkData in chkDatas">
          <tr class="miui-table-header">
            <td :colspan="3">验光号</td>
            <td>验光部门</td>
            <td :colspan="2">
              验光时间
            </td>
            <td :colspan="5">
              修改时间
            </td>
            <td>操作</td>
          </tr>
          <tr class="miui-table-tbody">
            <td :colspan="3">{{chkData.chkNumber}}</td>
            <td>{{chkData.checkDeptName}}</td>
            <td :colspan="2">{{chkData.createTime}}</td>
            <td :colspan="5">{{chkData.updateTime}}</td>
            <!-- <td>
              <el-button type="text" @click="deleteHandle(chkData.id)">删除</el-button>
            </td> -->
            <td>
              <el-button type="text" @click="detailHandle(chkData)">详情</el-button>
            </td>
          </tr>
        </table>
      </el-form>
    </basic-container>
    <!-- 预检 -->
    <pre-check v-if="preVisible" ref="preDialog"></pre-check>
    <!-- 弹窗，初验 -->
    <check-first v-if="checkFirstVisible" ref="checkFirstDialog" @close="getOptoList()"></check-first>
    <!-- 弹窗，复验 -->
    <check-again v-if="againVisible" ref="againDialog" @closeHandle="getOptoList()"></check-again>

    <!-- 弹窗，查询顾客 -->
    <!-- <search-customer v-if="searchCustomerVisible" ref="searchCustomer" @refreshForm="getCustomerData"></search-customer> -->
    <!-- 弹窗，顾客详情 -->
    <detail-customer v-if="detailCustomerVisible" ref="detailCustomer"></detail-customer>

    <search-person v-if="searchVisible" ref="searchDialog" @refreshForm="getPersonData"></search-person>
  </div>
</template>

<script>
  import { mapGetters } from 'vuex'
  import { filterParams } from '@/util/tools'
  import { getCustomerByCardNo } from "@/api/eims/customer"
  import { fetchPersonInfoByCode } from '@/api/pvm/person'

  import { getChkNumber, getChkOptometryList, delChkOptometryBasic } from '@/api/admin/optometry/optometry'

  import PreCheck from './PreCheck'
  import CheckFirst from './CheckFirst'
  import CheckAgain from './CheckAgain'


  import SearchCustomer from '@/components/business/customer-search' // 查询顾客
  import CustomerAdd from '@/views/eims/customer/form' //  新增会员
  import DetailCustomer from '@/views/eims/customer/detail' // 顾客详情

  import SearchPerson from '@/components/business/person-search'

  export default {
    data() {
      return {
        preVisible: false,
        checkFirstVisible: false,
        againVisible: false,
        checkData: {
          checkNumber: '',
          checker: '',
          checkDate: ''
        },
        chkDatas: [],
        customerData: {
          cardNum: '',
          id: '',
          name: '',
          gender: '',
          birthDay: '',
          telPhone: '',
          cardType: '',
          integral: ''
        },
        searchCustomerVisible: false,
        detailCustomerVisible: false,
        searchVisible: false
      }
    },
    components: {
      PreCheck,
      CheckFirst,
      CheckAgain,
      SearchCustomer,
      DetailCustomer,
      SearchPerson
    },
    computed: {
      ...mapGetters(['permissions', 'bizData', 'userInfo', 'isCollapse'])
    },
    created() {
      this.initData()
    },
    methods: {
      //  获取初始数据
      initData() {
        this.getChkNumber()
      },
      //  获取验光号
      getChkNumber() {
        getChkNumber().then(result => {
          this.$nextTick(() => {
            this.checkData.checkNumber = result.data.data
            this.checkData.checker = this.userInfo.realName
            this.checkData.checkDate = this.getDate()
          })

        })
      },
      //  获取验光日期
      getDate() {
        let nowDate = new Date();
        let date = {
          year: nowDate.getFullYear(),
          month: nowDate.getMonth() + 1,
          date: nowDate.getDate(),
        }
        if (date.month < 10) {
          date.month = "0" + date.month;
        }
        if (date.strDate < 10) {
          date.strDate = "0" + date.strDate;
        }
        return date.year + '-' + date.month + '-' + date.date
      },
      getOptoList(){
        getChkOptometryList({personId: this.customerData.id}).then(response => {
          if(response.data.code == '0'){
            this.chkDatas = response.data.data.records
          }else{
            this.$message.error(response.data.msg)
          }
        })
      },
      deleteHandle(id) {
        this.$confirm('此操作将永久删除, 是否继续?','提示',{confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning'}).then(() => {
          delChkOptometryBasic(id).then(result => {
            this.$message({type: 'success',message: '删除成功!'});
            this.getOptoList()
          })
        })
      },
      //  打开弹窗
      openDialog(name,id) {
        let data = {
          id: id,
          checkData: this.checkData,
          customer: this.customerData
        }
        switch (name) {
          case 'first':
            if (!this.customerData.id) {
              this.$message.warning('输入顾客卡号')
              return
            }
            data.type = 'first'
            this.checkFirstVisible = true
            this.$nextTick(() => {
              this.$refs.checkFirstDialog.init(data)
            })
            break;
          case 'again':
            if (!this.customerData.id) {
              this.$message.warning('输入顾客卡号')
              return
            }
            data.type = 'again'
            this.againVisible = true
            this.$nextTick(() => {
              this.$refs.againDialog.init(data)
            })
            break;
          case 'preCheck':
            // this.customerData.customerCard
            if (!this.customerData.id) {
              this.$message.warning('输入顾客卡号')
              return
            }
            this.preVisible = true
            this.$nextTick(() => {
              this.$refs.preDialog.init(data)
            })
            break;
          case 'person':
            this.searchVisible = true
            this.$nextTick(() => {
              this.$refs.searchDialog.init()
            })
            break;
          case 'customerDetail':
            this.detailCustomerVisible = true
            this.$nextTick(() => {
              this.$refs.detailCustomer.init(this.customerData.id, '会员详细')
            })
            break;
        }

      },
      //  查看验光详情信息
      detailHandle(data){
        let checkData = {
          checkNumber: data.chkNumber,
          checker: data.createUser,
          checkerName: data.createUserName,
          checkDate: data.createTime
        }
        let customer = this.customerData
        let data1 = {
          type: 'first',
          id: data.id,
          checkData: checkData,
          customer: customer
        }
        this.checkFirstVisible = true
        this.$nextTick(() => {
          this.$refs.checkFirstDialog.init(data1)
        })
      },
      // 获取顾客信息
      getPersonData(data) {
        this.customerData = data
        this.getOptoList()
      },
      //  读取卡号获取用户信息
      getCustomerByCardNo() {
        let cardNum = this.customerData.cardNum
        if(cardNum) {
          fetchPersonInfoByCode(cardNum).then(response => {
            if(response.data.code == '0'){
              if(response.data.data){
                this.customerData = response.data.data;
                this.getOptoList()
              }else{
                this.customerData = {
                  cardNum: cardNum,
                  id: '',
                  name: '',
                  gender: '',
                  birthDay: '',
                  telPhone: '',
                  cardType: '',
                  integral: ''
                }
                this.chkDatas = []
              }
            }else{
              this.$message.error(response.data.msg)
            }
          })
        }
      },
    }
  }
</script>

<style lang="scss" scoped>
  .row-bg {
    background-color: #cadee8;
    padding-left: 15px;
    padding-top: 5px;
  }
  .label-form {
    background-color: #fff;
    padding: 5px 10px;
    border-radius: 5px;
  }

  .width-125 {
    width: 125px;
  }

  .miui-table {
    width: 100%;
    margin: 0;

    tr th {
      background-color: #f4f5f7;
    }

    tr th,
    tr td {
      padding: 5px 8px;
      border: solid 1px #f5f5f5;
      text-align: center;
    }

    .miui-table-header td {
      background-color: rgba(202, 222, 232,0.9);
      color: #555;
    }

    .miui-table-tbody {
      background-color: rgba(202, 222, 232,0.6);
    }
  }
</style>
